<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增试卷')" />
    <th:block th:include="include :: bootstrap-select-css" />
    <th:block th:include="include :: bootstrap-duallistbox-css" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-paper-add">
            <input name="id" id="paperId" type="hidden">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">基本信息</a>
                    </li>
                    <li class=""><a id="question_tab" data-toggle="tab" href="#tab-2" aria-expanded="false">选择题目</a>
                    </li>
                    <li class=""><a id="peper_detail_tab" data-toggle="tab"  href="#tab-3" aria-expanded="false">试卷预览</a>
                    </li>
                    <li class=""><a id="peper_answer_tab" data-toggle="tab" href="#tab-4" aria-expanded="false">答案预览</a>
                    </li>
                </ul>

            <div class="tab-content">
                <div id="tab-1" class="tab-pane active">
                    <div class="panel-body">
                        <div class="form-group">
                            <input id="questionIds" value="" type="hidden">
                            <label class="col-sm-2 control-label is-required">名称：</label>
                            <div class="col-sm-4">
                                <input name="name" class="form-control" type="text" required>
                            </div>
                            <label class="col-sm-2 control-label is-required">试卷考试时间：</label>
                            <div class="col-sm-4 input-group">
                                <input name="duration" class="form-control" type="number" min="30" max="180"  required><span class="input-group-addon">分钟</span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label is-required">学期：</label>
                            <div class="col-sm-2">
                                <select name="term" class="form-control m-b selectpicker" th:with="type=${@dict.getType('sc_term_type')}" required>
                                    <option value="">请选择</option>
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                </select>
                            </div>
                            <label class="col-sm-2 control-label is-required">总分数：</label>
                            <div class="col-sm-2">
                                <input id="totalScore" name="totalScore" class="form-control" type="number" readonly value="0">
                            </div>
                            <label class="col-sm-2 control-label is-required">及格分数：</label>
                            <div class="col-sm-2">
                                <input name="passScore" class="form-control" type="number" min="60" max="150">
                            </div>
                        </div>


                        <div class="form-group">
                            <label class="col-sm-2 control-label is-required">学科：</label>
                            <div class="col-sm-2">
                                <select id="subject" name="subject" class="form-control m-b selectpicker" th:with="type=${@dict.getType('sc_subject_type')}" required>
                                    <option value="">请选择</option>
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                </select>
                            </div>
                            <label class="col-sm-2 control-label is-required">年级：</label>
                            <div class="col-sm-2">
                                <input id="gradeName" name="gradeName"  type="hidden">
                                <select class='form-control selectpicker' data-live-search="true" id='gradeId' name='gradeId'>
                                </select>
                            </div>
                            <label class="col-sm-2 control-label is-required">难度：</label>
                            <div class="col-sm-2">
                                <select name="difficulty" class="form-control m-b selectpicker" th:with="type=${@dict.getType('sc_exam_difficulty')}" required>
                                    <option value="">请选择</option>
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                </select>
                            </div>

                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">试卷介绍：</label>
                            <div class="col-sm-10">
                                <textarea name="description" class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label is-required">选择题型：</label>

                            <div class="col-sm-10">
                                <input name="questionTypes" type="hidden" id="questionTypesValue">
                                <select id="questionTypes" name="" th:with="type=${@dict.getType('sc_exam_question_type')}" class="dual_select" multiple required>
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-offset-5 col-sm-10">
                            <button type="button" class="btn btn-sm btn-primary" onclick="savePaperInfo('add')"><i class="fa fa-check"></i>保 存</button>&nbsp;
                        </div>
                    </div>
                </div>



            <!--选择试题-->
            <div id="tab-2" class="tab-pane">
                <div class="panel-body">
                    <div >
                        <div class="col-sm-4">
                            <div class="input-daterange input-group">
                                <input type="text" class="input-sm form-control" id="datetimepicker-startTime" name="params[beginTime]" placeholder="yyyy-MM-dd"/>
                                <span class="input-group-addon">-</span>
                                <input type="text" class="input-sm form-control" id="datetimepicker-endTime" name="params[endTime]" placeholder="yyyy-MM-dd"/>
                            </div>
                        </div>
                        <div class="col-sm-8">
                            <input type="hidden" id="type" name="type" value="">
                            <p id="question_types">

                            </p>
                        </div>
                        <div class="col-sm-12">
                            <table id="bootstrap-table" class="table table-bordered"></table>
                        </div>
                    </div>
                </div>

            </div>


                <!--试卷预览-->
                <div id="tab-3" class="tab-panquestion_typese tab-pane">
                    <div class="panel-body" style="height: 480px;" id="paper_print_div">


                    </div>

                </div>

                <!--答案预览-->
                <div id="tab-4" class="tab-panquestion_typese  tab-pane">
                    <div class="panel-body" style="height: 480px;" id="answer_print_div">

                    </div>

                </div>
            <!--预览-->
            <!--<div id="tab-3" class="tab-pane">
                <div class="panel-body">
                    <div>
                    </div>
                </div>

            </div>-->

            </div>
        </div>



        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-select-js" />
    <script th:src="@{/js/common/add_grade.js}"></script>
    <script th:src="@{/js/paper/paper.js?v=111223}"></script>
    <th:block th:include="include :: bootstrap-duallistbox-js" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('school:question:edit')}]];
        var removeFlag = [[${@permission.hasPermi('school:question:remove')}]];
        var typeDatas = [[${@dict.getType('sc_exam_question_type')}]];
        var difficultyDatas = [[${@dict.getType('sc_exam_difficulty')}]];
        var prefix = ctx + "school/paper";
        $("#form-paper-add").validate({
            focusCleanup: true
        });

        $(document).ready(function () {

            getQuestionTypes();
            $('#peper_detail_tab').click(function (e) {

                if($("#paperId").val() == '' || $("#paperId").val() == undefined){
                    $.modal.msgError("请先保存试卷基本信息");
                    return;
                }
                var url = prefix+"/print/"+$("#paperId").val();
                $("#paper_print_div").html('');
                var iframe = '<iframe id="print_iframe"  src="'+url+'" frameborder=0 width="100%" height="100%" scrolling="yes"></iframe>';
                $("#paper_print_div").html(iframe);
                //e.preventDefault();
                // $(this).tab('show');

            })
            $('#peper_answer_tab').click(function (e) {

                if($("#paperId").val() == '' || $("#paperId").val() == undefined){
                    $.modal.msgError("请先保存试卷基本信息");
                    return;
                }
                var url = prefix+"/answer/print/"+$("#paperId").val();
                $("#answer_print_div").html('');
                var iframe = '<iframe id="print_iframe"  src="'+url+'" frameborder=0 width="100%" height="100%" scrolling="yes"></iframe>';
                $("#answer_print_div    ").html(iframe);
                //e.preventDefault();
                // $(this).tab('show');

            })
        });

    </script>
</body>
</html>